<!-- 权限配置表单 -->
<template>
    <div class="collapse-content-box">
        <div v-if="processNodeForm.nodeTaskType === nodeTaskTypeValue.SUBMIT">
            <div class="option">
                <span class="title"> {{ t('permissionCanSubmit') }} </span>
                <div class="form-item">
                    <a-switch v-model:checked="form.basePermission.submitFlag" @change="handleFormChange" />
                </div>
            </div>
<!--            <div class="option">-->
<!--                <span class="title"> {{ t('permissionCanSave') }} </span>-->
<!--                <div class="form-item">-->
<!--                    <a-switch v-model:checked="form.basePermission.saveFlag" @change="handleFormChange" />-->
<!--                </div>-->
<!--            </div>-->
        </div>
        <div v-if="processNodeForm.nodeTaskType === nodeTaskTypeValue.APPROVE">
            <div class="option">
                <span class="title"> {{ t('permissionCanBack') }} </span>
                <div class="form-item">
                    <a-switch v-model:checked="form.basePermission.processRollbackFlag" @change="handleFormChange" />
                </div>
            </div>
            <div v-if="form.basePermission.processRollbackFlag" class="option">
                <span class="title"> {{ t('rollbackNodeRange') }} </span>
                <div class="form-item">
                    <a-select v-model:value="form.basePermission.rollbackNodeRange" @change="handleFormChange">
                        <a-select-option
                            v-for="condition in rollbackRangeOptions"
                            :key="condition.value"
                            :value="condition.value"
                        >
                            {{ condition.label }}
                        </a-select-option>
                    </a-select>
                </div>
            </div>
            <div class="option">
                <span class="title"> {{ t('permissionCanRefuse') }} </span>
                <div class="form-item">
                    <a-switch v-model:checked="form.basePermission.processRejectFlag" @change="handleFormChange" />
                </div>
            </div>
        </div>
        <div class="option">
            <span class="title"> {{ t('permissionCanEdit') }} </span>
            <div class="form-item">
                <a-switch v-model:checked="form.basePermission.formEditPermissionFlag" @change="handleFormChange" />
            </div>
        </div>
    </div>
    <a-table
        v-show="form.basePermission.formEditPermissionFlag"
        :columns="formPermissionTableColumns"
        row-key="filedId"
        :data-source="form.pageFieldIdList"
        :pagination="false"
    >
        <template #bodyCell="{ column, record, text }">
            <a v-if="column.dataIndex === 'label'">{{ text }}</a>
            <!-- 可见 -->
            <span v-if="column.dataIndex === 'visibilityFlag'">
                <a-checkbox v-model:checked="record.visibilityFlag" @change="handleFormChange" />
            </span>
            <!-- 可编辑 -->
            <span v-if="column.dataIndex === 'editableFlag'">
                <a-checkbox v-model:checked="record.editableFlag" @change="handleFormChange" />
            </span>
        </template>
    </a-table>
<!--    <div class="collapse-content-box">-->
<!--        <div class="option">-->
<!--            <span class="title"> {{ t('permissionReportFlag') }} </span>-->
<!--            <div class="form-item">-->
<!--                <a-switch v-model:checked="form.reportPermission.associatedReportFlag" @change="handleFormChange" />-->
<!--            </div>-->
<!--        </div>-->
<!--        <div v-if="form.reportPermission.associatedReportFlag">-->
<!--            <div class="option">-->
<!--                <span class="title"> {{ t('reportConfig') }} </span>-->
<!--                <div class="form-item">-->
<!--                    <a-input v-model:value="form.reportPermission.reportConfig" @change="handleFormChange" />-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="option">-->
<!--                <span class="title"> {{ t('reprotDefaultDisplayContent') }} </span>-->
<!--                <div class="form-item">-->
<!--                    <a-select v-model:value="form.reportPermission.defaultDisplayContent" @change="handleFormChange">-->
<!--                        <a-select-option-->
<!--                            v-for="condition in reportDefaultContentOptions"-->
<!--                            :key="condition.value"-->
<!--                            :value="condition.value"-->
<!--                        >-->
<!--                            {{ condition.label }}-->
<!--                        </a-select-option>-->
<!--                    </a-select>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
</template>

<script lang="ts">
    import { defineComponent, ref, watch } from 'vue'
    import { useI18n } from 'vue-i18n'
    import { cloneDeep } from 'lodash-es'
    import { permissionForm } from '../../../types/processNodeForm'
    import { nodeTaskTypeValue } from '@/enums/constant'
    export default defineComponent({
        props: {
            processNodeForm: {
                type: Object,
                default: () => ({})
            }
        },
        emits: ['change'],
        setup(props, { emit }) {
            const { t } = useI18n()
            // 回退范围选项列表
            const rollbackRangeOptions = [
                { label: t('rollbackRangeOption.previousNode'), value: 'ONE_BEFORE_NODE' },
                { label: t('rollbackRangeOption.allNode'), value: 'All_BEFORE_NODE' }
            ]
            // 报表默认展示内容选项列表
            const reportDefaultContentOptions = [
                { label: t('reportDefaultContentOption.form'), value: 'FORM' },
                { label: t('reportDefaultContentOption.reportForm'), value: 'REPORT' }
            ]
            // 表单权限表格的列配置
            const formPermissionTableColumns = ['label', 'visibilityFlag', 'editableFlag'].map(columnKey => {
                return {
                    title: t(`formPermissionTableColumn.${columnKey}`),
                    dataIndex: columnKey,
                    key: columnKey,
                    scopedSlots: { customRender: columnKey }
                }
            })

            const form = ref<permissionForm>()
            // 从processNodeForm属性中，获取当前组件需要的表单数据，构造一个新的表单
            function initForm() {
                const { basePermission, reportPermission, pageFieldIdList } = cloneDeep(props.processNodeForm || {})
                form.value = { basePermission, reportPermission, pageFieldIdList }
            }
            watch(
                () => props.processNodeForm,
                () => {
                    // processNodeForm发生变化时，重新初始化一下权限配置表单
                    initForm()
                },
                {
                    deep: true,
                    immediate: true
                }
            )

            // 表单数据发生变化，向组件外抛出change事件
            function handleFormChange() {
                emit('change', cloneDeep(form.value))
            }

            return {
                // 组件属性
                form,
                nodeTaskTypeValue,
                rollbackRangeOptions,
                reportDefaultContentOptions,
                formPermissionTableColumns,

                // 组件方法
                t,
                handleFormChange
            }
        }
    })
</script>

<i18n>
zh-CN:
  permissionCanSubmit: '提交'
  permissionCanSave: '保存'
  permissionCanBack: '流程回退'
  rollbackNodeRange: '流程回退范围'
  permissionCanRefuse: '流程拒绝'
  permissionCanEdit: '表单编辑权限'
  permissionReportFlag: '关联报表'
  reportConfig: '报表配置'
  reprotDefaultDisplayContent: '默认展示内容'
  rollbackRangeOption:
    previousNode: '上一个节点'
    allNode: '之前所有节点'
  reportDefaultContentOption:
    form: '表单'
    reportForm: '报表'
  formPermissionTableColumn:
    label: '名称'
    visibilityFlag: '可见'
    editableFlag: '可编辑'
</i18n>
